<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-10 22:00:14
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 325px);
    }

   
</style>
<div class="layuimini-page-anim">
    <div class="layui-bg-white">
        <div class="p-5">
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md8 p-4 solid-right">
                        <div class="layui-row mb-5">
                            <div class="layui-col-xs12 mt-3">
                                <label class="layui-font-gray">任务名称</label>
                                <span class="layui-font-black">车辆作业</span>
                            </div>
                            <div class="layui-col-xs12 mt-3">
                                <label class="layui-font-gray">处理人</label>
                                <span class="layui-font-black">汪成刚</span>
                            </div>
                            <div class="layui-col-xs12 mt-3">
                                <label class="layui-font-gray">处理情况</label>
                                <span class="layui-font-black">处理中</span>
                            </div>
                        </div>
                        <div class="solid-bottom"></div>
                        <div class="y-scroll" id="grid-card">
                            <div class="layui-row mb-5">
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">工单编码</label>
                                    <span class="layui-font-black">696341554786565</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">工单来源</label>
                                    <span class="layui-font-black">机械化作业</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">业务类型</label>
                                    <span class="layui-font-black">--</span>
                                </div>

                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">请求类</label>
                                    <span class="layui-font-black">机械化作业\机械化作业\车辆作业</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">创建人</label>
                                    <span class="layui-font-black">us系统</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">创建时间</label>
                                    <span class="layui-font-black">07-10 18:01:07</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">预约时间</label>
                                    <span class="layui-font-black">--</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">创建人所属组织</label>
                                    <span class="layui-font-black">US帐号创建</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">指派人</label>
                                    <span class="layui-font-black">US</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">指派时间</label>
                                    <span class="layui-font-black">07-10 18:01:07</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">部件</label>
                                    <span class="layui-font-black">--</span>
                                </div>

                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">任务描述</label>
                                    <span class="layui-font-black">【机械化作业工单】
                                        请您于
                                        2025-07-11 08:00 - 17:00 完成 巡逻车京AC75609（林雪松两人班次）20250708000020工单，作业路线是
                                        5609巡逻车作业计划</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">位置</label>
                                    <span class="layui-font-black">北京海淀上地街道项目</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">地理位置</label>
                                    <span class="layui-font-black">北京市海淀区上地街道马连洼北路17号</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">处理人责任组织</label>
                                    <span
                                        class="layui-font-black">\组织\供应商组织\北京万科物业服务有限公司供应商\海淀环境工程服务有限公司\海淀环境默认部门</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">初始责任组织</label>
                                    <span class="layui-font-black">\组织\供应商组织\北京万科物业服务有限公司供应商\运营工作组</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">处理人所属网格</label>
                                    <span class="layui-font-black">海淀环境环卫组</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">协助人</label>
                                    <span class="layui-font-black">--</span>
                                </div>
                            </div>



                            <div class="title-row">
                                <div class="title-left">
                                    <div class="title-info">
                                        <div class="title-line"></div>
                                        <span class="title-text">完成情况</span>
                                    </div>
                                </div>
                                <div class="title-right">
                                    <span class="title-right-text"></span>
                                </div>
                            </div>
                            <div class="layui-row mb-5">
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">最晚接单时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">计划开始时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">计划完工时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">实际接单时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">实际开始时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">实际完工时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">完工描述</label>
                                    <span class="layui-font-black">--</span>
                                </div>
                            </div>



                            <div class="title-row">
                                <div class="title-left">
                                    <div class="title-info">
                                        <div class="title-line"></div>
                                        <span class="title-text">验收情况</span>
                                    </div>
                                </div>
                                <div class="title-right">
                                    <span class="title-right-text"></span>
                                </div>
                            </div>
                            <div class="layui-row mb-5">
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">验收时间</label>
                                    <span class="layui-font-black">07-11 08:00:00</span>
                                </div>
                                <div class="layui-col-xs4 mt-3">
                                    <label class="layui-font-gray">评分</label>
                                    <span class="layui-font-black">--</span>
                                </div>

                                <div class="layui-col-xs12 mt-3">
                                    <label class="layui-font-gray">验收意见</label>
                                    <span class="layui-font-black">--</span>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="layui-col-md4 ">
                        <div class="layui-tabs " id="planTabs">
                            <ul class="layui-tabs-header">
                                <li lay-id="periodicPlan1">图片/视频</li>
                                <li lay-id="periodicPlan2">关联事件</li>
                                <li lay-id="periodicPlan3">工单进度</li>
                            </ul>
                            <div class="layui-tabs-body p-4">
                                <div class="layui-tabs-item" lay-id="periodicPlan1">
                                    处理前
                                    处理后


                                </div>
                                <div class="layui-tabs-item" lay-id="periodicPlan2">
                                    <div class="layui-row mb-5">
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">事件编码：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">事件来源：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">事件描述：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">位置：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">部件：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">类型：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">上报人：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">上报时间：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">指派时间：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                        <div class="layui-col-xs12 mt-3">
                                            <label class="layui-font-gray">图片/视频：</label>
                                            <span class="layui-font-black">--</span>
                                        </div>
                                    </div>

                                </div>
                                <div class="layui-tabs-item" lay-id="periodicPlan3">
                                    <div class="layui-timeline">
                                        <div class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis"></i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">2025-07-10 18:01:08</h3>
                                                <div>
                                                    <span class="layui-badge layui-bg-blue">进行中</span>
                                                </div>
                                                <div>us系统分配任务至汪成刚自动分配</div>
                                            </div>
                                        </div>
                                        <div class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis"></i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                <div> <span class="layui-badge layui-bg-green">待领</span></div>
                                                <div>系统自动分配任务至汪成刚</div>
                                            </div>
                                        </div>
                                        <div class="layui-timeline-item">
                                             <i class="layui-icon layui-timeline-axis"></i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                <div> <span class="layui-badge layui-bg-green">待领</span></div>
                                                <div>系统自动分配任务至北京万科物业服务有限公司供应商\运营工作组</div>
                                            </div>
                                        </div>
                                        <div class="layui-timeline-item">
                                             <i class="layui-icon layui-timeline-axis"></i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">2025-07-10 18:01:07</h3>
                                                <div> <span class="layui-badge layui-bg-green">待领</span></div>
                                                <div>us系统创建任务</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            tabs = layui.tabs,
            form = layui.form,
            util = layui.util;

        // 初始化选项卡
        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });



    })
</script>